<template>
  <div class="cont">
    <ul id="tabList">
        <router-link active-class="active" tag="li" to="/albums">音单</router-link>
        <router-link active-class="active" tag="li" to="/recommend">推荐</router-link>
        <router-link active-class="active" tag="li" to="/catalogs">分类</router-link>
    </ul>

        <!-- <transition :enter-active-class="'animated '+enterClass" :leave-active-class="'animated '+leaveClass"> -->
            <router-view v-bind="$attrs" class="bg_color" ></router-view>
        <!-- </transition> -->
    <slot></slot>
  </div>
</template>

<script>
export default {
    data(){
        return {
            enterClass:"",
            leaveClass:"",
            update:""
        }
    },
    watch:{
        $route(to,from){
            if(to.meta>from.meta){
                this.enterClass="slideInRight"
                this.leaveClass="slideOutLeft"
            }else{
                this.enterClass="slideInLeft"
                this.leaveClass="slideOutRight"
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.cont
    min-height calc(100% - 0.4rem)
    flex 1
    display flex
    flex-direction column
    position relative
    #tabList
        height .4rem
        position relative
        display flex
        width 100%
        background #fff
        justify-content space-between
        align-items center
        line-height .4rem
        border-bottom .01rem solid #e0e0e0
        li
            position relative
            padding 0 .15rem
            font-size .14rem
            text-align center
            color #9e9e9e
            flex 1
            height .39rem
            &.active
                color #000
                border-color #000
            &:after
                content ''
                height 100%
                display block
                position absolute
                bottom 0
                border-bottom .02rem solid transparent
                margin 0 .2rem
                left 0
                right 0
            &.active:after
                border-color #000
    .bg_color
        background #f5f5f5
    .fly-content
        position relative
        width 100%
        min-height 100%
</style>